<template>
  <div class="upload-container">
    <div class="upload-card">
      <h2 class="upload-title">上传音乐</h2>

      <form @submit.prevent="handleSubmit" class="upload-form">
        <!-- 音乐标题 -->
        <div class="form-group">
          <label for="title">音乐标题 *</label>
          <input
            id="title"
            v-model="form.title"
            type="text"
            class="form-input"
            placeholder="请输入音乐标题"
            required
          />
          <span v-if="errors.title" class="error-message">{{ errors.title }}</span>
        </div>

        <!-- 音乐介绍 -->
        <div class="form-group">
          <label for="description">音乐介绍</label>
          <textarea
            id="description"
            v-model="form.description"
            class="form-textarea"
            placeholder="请输入音乐介绍"
            rows="3"
          ></textarea>
          <span v-if="errors.description" class="error-message">{{ errors.description }}</span>
        </div>

        <!-- 封面上传 -->
        <div class="form-group">
          <label>封面图片</label>
          <div class="file-upload-area" @drop.prevent="handleCoverDrop" @dragover.prevent>
            <input
              ref="coverInput"
              type="file"
              accept="image/*"
              @change="handleCoverSelect"
              class="file-input"
            />
            <div v-if="!coverPreview" class="upload-placeholder">
              <div class="upload-icon">📷</div>
              <p>点击或拖拽上传封面</p>
            </div>
            <div v-else class="preview-container">
              <img :src="coverPreview" alt="封面预览" class="cover-preview" />
              <button type="button" class="remove-btn" @click="removeCover">×</button>
            </div>
          </div>
          <span v-if="errors.cover" class="error-message">{{ errors.cover }}</span>
        </div>

        <!-- 音乐文件上传 -->
        <div class="form-group">
          <label>音乐文件 *</label>
          <div class="file-upload-area" @drop.prevent="handleAudioDrop" @dragover.prevent>
            <input
              ref="audioInput"
              type="file"
              accept="audio/*"
              @change="handleAudioSelect"
              class="file-input"
            />
            <div v-if="!audioFile" class="upload-placeholder">
              <div class="upload-icon">🎵</div>
              <p>点击或拖拽上传音乐文件</p>
            </div>
            <div v-else class="file-info">
              <div class="file-name">{{ audioFile.name }}</div>
              <div class="file-size">{{ formatFileSize(audioFile.size) }}</div>
              <button type="button" class="remove-btn" @click="removeAudio">×</button>
            </div>
          </div>
          <span v-if="errors.audio" class="error-message">{{ errors.audio }}</span>
        </div>

        <!-- 三级曲风选择 -->
        <div class="form-group">
          <label>三级曲风 *</label>
          <div class="genre-select-group">
            <!-- 一级曲风 -->
            <select
              v-model="selectedMainGenre"
              @change="handleMainGenreChange"
              class="form-select genre-select"
            >
              <option value="" disabled>请选择一级曲风</option>
              <option v-for="genre in mainGenres" :key="genre.id" :value="genre.id">
                {{ genre.name }}
              </option>
            </select>
            <button
              type="button"
              class="add-genre-btn"
              @click="openAddGenreDialog('MAIN')"
              title="添加一级曲风"
            >
              +
            </button>
          </div>

          <div class="genre-select-group" v-if="selectedMainGenre">
            <!-- 二级曲风 -->
            <select
              v-model="selectedSubGenre"
              @change="handleSubGenreChange"
              class="form-select genre-select"
            >
              <option value="" disabled>请选择二级曲风</option>
              <option v-for="genre in subGenres" :key="genre.id" :value="genre.id">
                {{ genre.name }}
              </option>
            </select>
            <button
              type="button"
              class="add-genre-btn"
              @click="openAddGenreDialog('SUB', selectedMainGenre)"
              title="添加二级曲风"
            >
              +
            </button>
          </div>

          <div class="genre-select-group" v-if="selectedSubGenre">
            <!-- 三级曲风 -->
            <select
              v-model="selectedSubtypeGenre"
              @change="handleSubtypeGenreChange"
              class="form-select genre-select"
            >
              <option value="" disabled>请选择三级曲风</option>
              <option v-for="genre in subtypeGenres" :key="genre.id" :value="genre.id">
                {{ genre.name }}
              </option>
            </select>
            <button
              type="button"
              class="add-genre-btn"
              @click="openAddGenreDialog('SUBTYPE', selectedSubGenre)"
              title="添加三级曲风"
            >
              +
            </button>
          </div>
          <span v-if="errors.genreId" class="error-message">{{ errors.genreId }}</span>
        </div>

        <!-- 所属专辑 -->
        <div class="form-group">
          <label for="album">所属专辑</label>
          <select id="album" v-model="form.albumId" class="form-select">
            <option value="">请选择专辑（可选）</option>
            <option v-for="album in userAlbums" :key="album.id" :value="album.id">
              {{ album.name || album.title || '未命名专辑' }}
            </option>
          </select>
          <span v-if="errors.albumId" class="error-message">{{ errors.albumId }}</span>
        </div>

        <!-- 合作人选择 -->
        <div class="form-group">
          <label>合作人</label>
          <div class="collaborators-section">
            <!-- 已选合作人列表 -->
            <div class="selected-collaborators">
              <div class="collaborator-card">
                <div class="collaborator-info">
                  <img
                    v-if="userStore.userInfo?.avatarUrl"
                    :src="userStore.userInfo.avatarUrl"
                    :alt="userStore.userInfo.nickname || userStore.userInfo.username"
                    class="collaborator-avatar"
                  />
                  <div v-else class="collaborator-avatar-placeholder">
                    {{
                      (userStore.userInfo?.nickname || userStore.userInfo?.username || '我').charAt(
                        0,
                      )
                    }}
                  </div>
                  <span class="collaborator-name"
                    >{{
                      userStore.userInfo?.nickname || userStore.userInfo?.username || '我'
                    }}
                    (您自己)</span
                  >
                </div>
                <span class="creator-badge">创建者</span>
              </div>

              <div
                v-for="user in selectedCollaborators.filter((u) => u.id !== userStore.userId)"
                :key="user.id"
                class="collaborator-card"
              >
                <div class="collaborator-info">
                  <img
                    v-if="user.avatarUrl"
                    :src="user.avatarUrl"
                    :alt="user.nickname || user.username"
                    class="collaborator-avatar"
                  />
                  <div v-else class="collaborator-avatar-placeholder">
                    {{ (user.nickname || user.username).charAt(0) }}
                  </div>
                  <span class="collaborator-name">{{ user.nickname || user.username }}</span>
                </div>
                <button
                  type="button"
                  class="remove-collaborator-btn"
                  @click="removeCollaborator(user.id)"
                  title="移除合作人"
                >
                  ×
                </button>
              </div>
            </div>

            <!-- 添加合作人区域 -->
            <div class="add-collaborator-area">
              <select
                v-model="selectedUserId"
                class="form-select add-collaborator-select"
                @change="addCollaborator"
              >
                <option value="">选择要添加的合作人</option>
                <option v-for="user in availableUsers" :key="user.id" :value="user.id">
                  {{ user.nickname || user.username }}
                </option>
              </select>
              <!-- <button
                type="button"
                class="btn btn-secondary add-btn"
                @click="addCollaborator"
                :disabled="!selectedUserId"
              >
                添加
              </button> -->
            </div>
          </div>
          <span class="help-text">当前用户默认作为创建者，不可移除</span>
        </div>

        <!-- 进度条 -->
        <div v-if="uploading" class="progress-container">
          <div class="progress-bar">
            <div class="progress" :style="{ width: uploadProgress + '%' }"></div>
          </div>
          <span class="progress-text">{{ uploadProgress }}%</span>
        </div>

        <!-- 按钮区域 -->
        <div class="button-group">
          <button
            type="submit"
            class="btn btn-primary"
            :disabled="uploading || !isFormValid"
            @click="continueUpload = false"
          >
            {{ uploading ? '上传中...' : '上传音乐' }}
          </button>
          <button
            type="submit"
            class="btn btn-secondary"
            :disabled="uploading || !isFormValid"
            @click="continueUpload = true"
          >
            {{ uploading ? '上传中...' : '上传音乐并继续上传' }}
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- 成功弹窗 -->
  <GreenSuccessDialog ref="successDialog" />

  <!-- 添加曲风对话框 -->
  <div v-if="showAddGenreDialog" class="genre-dialog-overlay" @click="showAddGenreDialog = false">
    <div class="genre-dialog" @click.stop>
      <h3>添加新曲风</h3>
      <form @submit.prevent="handleAddGenre">
        <div class="form-group">
          <label>曲风名称 *</label>
          <input
            v-model="newGenreData.name"
            type="text"
            class="form-input"
            placeholder="请输入曲风名称"
            required
          />
        </div>
        <div class="dialog-buttons">
          <button type="button" class="btn btn-secondary" @click="showAddGenreDialog = false">
            取消
          </button>
          <button type="submit" class="btn btn-primary">添加</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { uploadMusic } from '@/api/music'
import { getUserAlbums } from '@/api/album'
import { getMainGenres, getSubGenres, getSubTypeGenres, addGenre } from '@/api/genre'
import { getAllUsers } from '@/api/user'
import { useUserStore } from '@/stores/user'
import GreenSuccessDialog from '@/components/GreenSuccessDialog.vue'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 表单数据
const form = reactive({
  title: '',
  description: '',
  cover: null,
  audio: null,
  albumId: '',
  genreId: '',
})

// 错误信息
const errors = reactive({
  title: '',
  description: '',
  cover: '',
  audio: '',
  albumId: '',
  genreId: '',
})

// 曲风选择相关
const mainGenres = ref([])
const subGenres = ref([])
const subtypeGenres = ref([])
const selectedMainGenre = ref('')
const selectedSubGenre = ref('')
const selectedSubtypeGenre = ref('')
const showAddGenreDialog = ref(false)
const newGenreData = reactive({
  name: '',
  type: '',
  parentId: null,
})

// 文件相关
const coverInput = ref(null)
const audioInput = ref(null)
const coverPreview = ref('')
const audioFile = ref(null)

// 上传状态
const uploading = ref(false)
const uploadProgress = ref(0)
const continueUpload = ref(false)

// 用户专辑列表
const userAlbums = ref([])

// 合作人相关数据
const allUsers = ref([])
const selectedCollaborators = ref([])
const selectedUserId = ref('')

// 成功弹窗
const successDialog = ref(null)

// 计算属性 - 已更新到文件底部，包含genreId验证

// 获取用户专辑列表
const loadUserAlbums = async () => {
  if (!userStore.userId) return

  try {
    const response = await getUserAlbums(userStore.userId)
    if (response && response.data) {
      userAlbums.value = response.data
    }
  } catch (error) {
    console.error('获取用户专辑失败:', error)
  }
}

// 加载所有用户
const loadAllUsers = async () => {
  try {
    const response = await getAllUsers()
    allUsers.value = response.data || []

    // 确保当前用户始终在合作人列表中
    if (userStore.userId) {
      const currentUserData = {
        id: userStore.userId,
        username: userStore.userInfo?.username || '当前用户',
        nickname: userStore.userInfo?.nickname || userStore.userInfo?.username || '当前用户',
        avatarUrl: userStore.userInfo?.avatarUrl || null,
      }

      // 首先确保当前用户在allUsers中
      const existingUserIndex = allUsers.value.findIndex((u) => u.id === userStore.userId)
      if (existingUserIndex === -1) {
        // 如果当前用户不在列表中，添加到列表开头
        allUsers.value.unshift(currentUserData)
      }

      // 然后设置当前用户为合作人（始终添加，无论是否在列表中）
      selectedCollaborators.value = [currentUserData]
    }
  } catch (error) {
    console.warn('加载用户列表失败:', error.message || error)
    // 静默处理用户列表加载失败
    allUsers.value = []
  }
}

// 添加合作人
const addCollaborator = () => {
  if (!selectedUserId.value) return

  const user = allUsers.value.find((u) => u.id === selectedUserId.value)
  if (user && !isUserSelected(user.id)) {
    selectedCollaborators.value.push(user)
  }
  selectedUserId.value = ''
}

// 移除合作人
const removeCollaborator = (userId) => {
  selectedCollaborators.value = selectedCollaborators.value.filter((user) => user.id !== userId)
}

// 检查用户是否已被选择
const isUserSelected = (userId) => {
  return selectedCollaborators.value.some((user) => user.id === userId)
}

// 加载一级曲风
const loadMainGenres = async () => {
  try {
    const response = await getMainGenres()
    if (response && response.data) {
      mainGenres.value = response.data
    }
  } catch (error) {
    // 静默处理404错误
    if (error.response?.status !== 404) {
      console.warn('获取一级曲风失败:', error.message || error)
    }
  }
}

// 加载二级曲风
const loadSubGenres = async (parentId) => {
  if (!parentId) {
    subGenres.value = []
    subtypeGenres.value = []
    selectedSubGenre.value = ''
    selectedSubtypeGenre.value = ''
    return
  }

  try {
    const response = await getSubGenres(parentId)
    if (response && response.data) {
      subGenres.value = response.data
    }
  } catch (error) {
    // 静默处理404错误
    if (error.response?.status !== 404) {
      console.warn('获取二级曲风失败:', error.message || error)
    }
  }
}

// 加载三级曲风
const loadSubtypeGenres = async (parentId) => {
  if (!parentId) {
    subtypeGenres.value = []
    selectedSubtypeGenre.value = ''
    return
  }

  try {
    const response = await getSubTypeGenres(parentId)
    if (response && response.data) {
      subtypeGenres.value = response.data
    }
  } catch (error) {
    // 静默处理404错误
    if (error.response?.status !== 404) {
      console.warn('获取三级曲风失败:', error.message || error)
    }
  }
}

// 处理一级曲风变化
const handleMainGenreChange = () => {
  selectedSubGenre.value = ''
  selectedSubtypeGenre.value = ''
  form.genreId = ''
  loadSubGenres(selectedMainGenre.value)
}

// 处理二级曲风变化
const handleSubGenreChange = () => {
  selectedSubtypeGenre.value = ''
  form.genreId = ''
  loadSubtypeGenres(selectedSubGenre.value)
}

// 处理三级曲风变化
const handleSubtypeGenreChange = () => {
  form.genreId = selectedSubtypeGenre.value
}

// 打开添加曲风对话框
const openAddGenreDialog = (type, parentId = null) => {
  newGenreData.name = ''
  newGenreData.type = type
  newGenreData.parentId = parentId
  showAddGenreDialog.value = true
}

// 添加新曲风
const handleAddGenre = async () => {
  if (!newGenreData.name.trim()) {
    ElMessage({
      message: '请输入曲风名称',
      type: 'warning',
    })
    return
  }

  try {
    const genreData = {
      name: newGenreData.name.trim(),
      type: newGenreData.type,
      parentId: newGenreData.parentId,
    }

    console.log('genreData', genreData)

    const response = await addGenre(genreData)
    if (response && response.code === 200) {
      // 重新加载对应层级的曲风
      if (newGenreData.type === 'MAIN') {
        await loadMainGenres()
      } else if (newGenreData.type === 'SUB') {
        await loadSubGenres(newGenreData.parentId)
      } else if (newGenreData.type === 'SUBTYPE') {
        await loadSubtypeGenres(newGenreData.parentId)
      }

      showAddGenreDialog.value = false
      ElMessage({
        message: '曲风添加成功！',
        type: 'success',
      })
    } else {
      throw new Error(response?.message || '添加失败')
    }
  } catch (error) {
    console.error('添加曲风失败:', error)
    ElMessage({
      message: error.message || '添加曲风失败，请重试',
      type: 'error',
    })
  }
}

// 验证专辑权限 - 检查用户专辑列表中是否包含该专辑
const validateAlbumAccess = async (albumId) => {
  try {
    // 确保用户专辑列表已加载
    if (userAlbums.value.length === 0) {
      await loadUserAlbums()
    }

    // 检查专辑是否在用户专辑列表中
    const hasAlbum = userAlbums.value.some((album) => album.id === parseInt(albumId))
    return hasAlbum
  } catch (error) {
    console.error('验证专辑权限失败:', error)
    return false
  }
}

// 处理专辑ID参数
const handleAlbumParam = async () => {
  const albumId = route.query.albumId
  if (albumId) {
    const hasAccess = await validateAlbumAccess(albumId)
    if (hasAccess) {
      form.albumId = albumId
    }
  }
}

// 封面文件处理
const handleCoverSelect = (event) => {
  const file = event.target.files[0]
  if (file) {
    form.cover = file
    const reader = new FileReader()
    reader.onload = (e) => {
      coverPreview.value = e.target.result
    }
    reader.readAsDataURL(file)
    errors.cover = ''
  }
}

const handleCoverDrop = (event) => {
  const file = event.dataTransfer.files[0]
  if (file && file.type.startsWith('image/')) {
    form.cover = file
    const reader = new FileReader()
    reader.onload = (e) => {
      coverPreview.value = e.target.result
    }
    reader.readAsDataURL(file)
    errors.cover = ''
  }
}

const removeCover = () => {
  form.cover = null
  coverPreview.value = ''
  if (coverInput.value) {
    coverInput.value.value = ''
  }
}

// 音频文件处理
const handleAudioSelect = (event) => {
  const file = event.target.files[0]
  if (file) {
    audioFile.value = file
    form.audio = file
    errors.audio = ''
  }
}

const handleAudioDrop = (event) => {
  const file = event.dataTransfer.files[0]
  if (file && file.type.startsWith('audio/')) {
    audioFile.value = file
    form.audio = file
    errors.audio = ''
  }
}

const removeAudio = () => {
  audioFile.value = null
  form.audio = null
  if (audioInput.value) {
    audioInput.value.value = ''
  }
}

// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 表单验证
const validateForm = () => {
  let isValid = true

  // 重置错误
  Object.keys(errors).forEach((key) => (errors[key] = ''))

  if (!form.title.trim()) {
    errors.title = '请输入音乐标题'
    isValid = false
  }

  if (!audioFile.value) {
    errors.audio = '请选择音乐文件'
    isValid = false
  }

  if (!form.genreId) {
    errors.genreId = '请选择三级曲风'
    isValid = false
  }

  return isValid
}

// 提交表单
const handleSubmit = async (event) => {
  event.preventDefault()

  if (!validateForm()) return

  uploading.value = true
  uploadProgress.value = 0

  try {
    // 构建合作人ID字符串
    const creatorIds = selectedCollaborators.value
      .map((user) => user.id)
      .sort((a, b) => a - b)
      .join('-')

    const formData = new FormData()
    formData.append('title', form.title.trim())
    formData.append('description', form.description.trim())
    formData.append('audioFile', form.audio)
    formData.append('genreId', form.genreId)
    formData.append('creatorIds', creatorIds)

    if (form.cover) {
      formData.append('coverImage', form.cover)
    }

    if (form.albumId) {
      formData.append('albumId', form.albumId)
    }

    const response = await uploadMusic(formData, (progressEvent) => {
      uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
    })

    if (response && response.code === 200) {
      successDialog.value
        .show({
          message: '音乐上传成功，目前处于审核状态！',
          title: '上传成功',
          confirmText: '确定',
          cancelText: '继续上传',
          showCancel: continueUpload.value,
        })
        .then((result) => {
          if (continueUpload.value) {
            // 重置表单但保留专辑选择
            resetForm(false)
          } else {
            // 跳转到音乐详情页或首页
            router.push('/')
          }
        })
    } else {
      throw new Error(response?.message || '上传失败')
    }
  } catch (error) {
    console.error('上传失败:', error)
    alert(error.message || '上传失败，请重试')
  } finally {
    uploading.value = false
  }
}

// 重置表单
const resetForm = (resetAlbum = true) => {
  form.title = ''
  form.description = ''
  form.cover = null
  form.audio = null
  form.genreId = ''
  if (resetAlbum) {
    form.albumId = ''
  }

  coverPreview.value = ''
  audioFile.value = null
  selectedMainGenre.value = ''
  selectedSubGenre.value = ''
  selectedSubtypeGenre.value = ''
  subGenres.value = []
  subtypeGenres.value = []

  if (coverInput.value) coverInput.value.value = ''
  if (audioInput.value) audioInput.value.value = ''

  Object.keys(errors).forEach((key) => (errors[key] = ''))

  // 重置合作人，保留当前用户
  if (userStore.userId) {
    const currentUserData = {
      id: userStore.userId,
      username: userStore.userInfo?.username || '当前用户',
      nickname: userStore.userInfo?.nickname || userStore.userInfo?.username || '当前用户',
      avatarUrl: userStore.userInfo?.avatarUrl || null,
    }
    selectedCollaborators.value = [currentUserData]
  }
}

// 监听路由参数变化
watch(
  () => route.query.albumId,
  () => {
    handleAlbumParam()
  },
)

// 组件挂载时初始化
onMounted(async () => {
  await loadUserAlbums()
  await handleAlbumParam()
  await loadMainGenres()
  await loadAllUsers()
})

// 更新计算属性以包含genreId验证
const isFormValid = computed(() => {
  return form.title.trim() && audioFile.value && form.genreId && !uploading.value
})

// 计算属性：可用用户列表（排除已选择的用户）
const availableUsers = computed(() => {
  return allUsers.value.filter(
    (user) => !selectedCollaborators.value.find((collab) => collab.id === user.id),
  )
})
</script>

<style scoped>
.upload-container {
  min-height: 100vh;
  padding: 40px 20px;
  /* background: linear-gradient(135deg, #f8fff8 0%, #f0f9f0 100%); */
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(39, 174, 96, 0.15);
  padding: 40px;
  width: 100%;
  max-width: 600px;
  border: 1px solid rgba(39, 174, 96, 0.1);
}

.upload-title {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 600;
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 8px;
  color: #2c3e50;
}

.form-input,
.form-textarea,
.form-select {
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: white;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--success-color);
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.file-upload-area {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.file-upload-area:hover {
  border-color: #27ae60;
  background: rgba(39, 174, 96, 0.05);
}

.file-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.upload-placeholder {
  color: #666;
}

.upload-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.preview-container {
  position: relative;
  display: inline-block;
}

.cover-preview {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
}

.file-info {
  text-align: left;
}

.file-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.file-size {
  color: #666;
}

/* 合作人选择样式 */
.collaborators-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.selected-collaborators {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.collaborator-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.collaborator-card:hover {
  background: #f1f3f4;
  border-color: #dee2e6;
}

.collaborator-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.collaborator-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.collaborator-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.collaborator-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #2c3e50;
}

.creator-badge {
  font-size: 0.75rem;
  color: #27ae60;
  font-weight: 600;
  background: #e8f5e8;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
}

.remove-collaborator-btn {
  background: #ff4757;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.remove-collaborator-btn:hover {
  background: #ff3742;
  transform: scale(1.1);
}

.add-collaborator-area {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.add-collaborator-select {
  flex: 1;
  margin: 0;
}

.add-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.help-text {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: 0.25rem;
}

.remove-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ff4757;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-message {
  color: #ff4757;
  font-size: 14px;
  margin-top: 4px;
}

.progress-container {
  margin-top: 15px;
}

.progress-bar {
  height: 8px;
  background: #e8f5e8;
  border-radius: 4px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #27ae60, #2ecc71);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-text {
  display: block;
  text-align: center;
  margin-top: 8px;
  color: var(--success-color);
  font-weight: 600;
}

.button-group {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 30px;
}

.btn {
  padding: 14px 28px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: white;
  box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: white;
  color: #27ae60;
  border: 2px solid #27ae60;
}

.btn-secondary:hover:not(:disabled) {
  background: #27ae60;
  color: white;
  transform: translateY(-2px);
}

.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 768px) {
  .upload-card {
    padding: 30px 20px;
    margin: 20px;
  }

  .button-group {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}

.genre-select-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.genre-select {
  flex: 1;
  margin-bottom: 0;
}

.add-genre-btn {
  width: 36px;
  height: 36px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.add-genre-btn:hover {
  background: #2ecc71;
  transform: scale(1.1);
}

.genre-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.genre-dialog {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
}

.genre-dialog h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #2c3e50;
  text-align: center;
}

.dialog-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .genre-select-group {
    flex-direction: column;
    align-items: stretch;
  }

  .add-genre-btn {
    width: 100%;
    border-radius: 8px;
  }
}
</style>
